<template>
  <div class="demo-container">
    <h1>VIcon 组件完整使用示例</h1>
    <p class="intro">VIcon 是一个功能丰富的图标组件，支持多种样式、动画和交互效果。</p>

    <!-- 基础用法 -->
    <div class="demo-section">
      <h3>1. 基础用法</h3>
      <p class="section-desc">最简单的图标使用方式，只需指定图标名称。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" size="32"
                 tooltip="基础图标：&lt;VIcon name=&quot;layout-notice&quot; size=&quot;32&quot; /&gt;"/>
          <span class="label">基础图标</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" size="32" color="#666"
                 tooltip="灰色图标：&lt;VIcon name=&quot;layout-notice&quot; size=&quot;32&quot; color=&quot;#666&quot; /&gt;"/>
          <span class="label">灰色图标</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" size="32" cursor="pointer"
                 tooltip="可点击图标：&lt;VIcon name=&quot;layout-notice&quot; size=&quot;32&quot; cursor=&quot;pointer&quot; /&gt;"/>
          <span class="label">可点击图标</span>
        </div>
      </div>
    </div>

    <!-- 颜色设置 -->
    <div class="demo-section">
      <h3>2. 颜色设置</h3>
      <p class="section-desc">通过 color 属性设置图标颜色，支持颜色名称、十六进制、RGB 等格式。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" color="red" size="32" tooltip="红色图标：&lt;VIcon color=&quot;red&quot; /&gt;"/>
          <span class="label">red</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" color="#1890ff" size="32"
                 tooltip="蓝色图标：&lt;VIcon color=&quot;#1890ff&quot; /&gt;"/>
          <span class="label">#1890ff</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" color="green" size="32"
                 tooltip="绿色图标：&lt;VIcon color=&quot;green&quot; /&gt;"/>
          <span class="label">green</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" color="rgba(255,165,0,0.8)" size="32"
                 tooltip="半透明橙色：&lt;VIcon color=&quot;rgba(255,165,0,0.8)&quot; /&gt;"/>
          <span class="label">rgba(255,165,0,0.8)</span>
        </div>
      </div>
    </div>

    <!-- 尺寸控制 -->
    <div class="demo-section">
      <h3>3. 尺寸控制</h3>
      <p class="section-desc">通过 size、width、height 属性控制图标大小，支持数字（像素）和字符串单位。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" size="16" tooltip="16px 图标：&lt;VIcon size=&quot;16&quot; /&gt;"/>
          <span class="label">size="16"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" size="24" tooltip="24px 图标：&lt;VIcon size=&quot;24&quot; /&gt;"/>
          <span class="label">size="24"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" size="32" tooltip="32px 图标：&lt;VIcon size=&quot;32&quot; /&gt;"/>
          <span class="label">size="32"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" size="2em" tooltip="2em 图标：&lt;VIcon size=&quot;2em&quot; /&gt;"/>
          <span class="label">size="2em"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" width="40" height="20"
                 tooltip="自定义宽高：&lt;VIcon width=&quot;40&quot; height=&quot;20&quot; /&gt;"/>
          <span class="label">width="40" height="20"</span>
        </div>
      </div>
    </div>

    <!-- 旋转和翻转 -->
    <div class="demo-section">
      <h3>4. 旋转和翻转</h3>
      <p class="section-desc">通过 rotate 属性设置旋转角度，通过 flip 属性设置水平或垂直翻转。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" size="32" tooltip="原始图标：&lt;VIcon /&gt;"/>
          <span class="label">原始</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" rotate="45" size="32" tooltip="旋转45度：&lt;VIcon rotate=&quot;45&quot; /&gt;"/>
          <span class="label">rotate="45"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" rotate="90" size="32" tooltip="旋转90度：&lt;VIcon rotate=&quot;90&quot; /&gt;"/>
          <span class="label">rotate="90"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" rotate="180" size="32"
                 tooltip="旋转180度：&lt;VIcon rotate=&quot;180&quot; /&gt;"/>
          <span class="label">rotate="180"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" flip="h" size="32" tooltip="水平翻转：&lt;VIcon flip=&quot;h&quot; /&gt;"/>
          <span class="label">flip="h"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" flip="v" size="32" tooltip="垂直翻转：&lt;VIcon flip=&quot;v&quot; /&gt;"/>
          <span class="label">flip="v"</span>
        </div>
      </div>
    </div>

    <!-- 动画效果 -->
    <div class="demo-section">
      <h3>5. 动画效果</h3>
      <p class="section-desc">通过 spin 属性启用旋转动画，通过 speed 属性控制动画速度。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" spin size="32" tooltip="默认旋转动画：&lt;VIcon spin /&gt;"/>
          <span class="label">spin (默认速度)</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" spin :speed="0.5" size="32"
                 tooltip="慢速旋转：&lt;VIcon spin :speed=&quot;0.5&quot; /&gt;"/>
          <span class="label">spin :speed="0.5"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" spin :speed="2" size="32"
                 tooltip="快速旋转：&lt;VIcon spin :speed=&quot;2&quot; /&gt;"/>
          <span class="label">spin :speed="2"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" spin :speed="3" size="32" color="#ff4d4f"
                 tooltip="超快速红色旋转：&lt;VIcon spin :speed=&quot;3&quot; color=&quot;#ff4d4f&quot; /&gt;"/>
          <span class="label">spin :speed="3"</span>
        </div>
      </div>
    </div>

    <!-- Tooltip 提示 -->
    <div class="demo-section">
      <h3>6. Tooltip 提示</h3>
      <p class="section-desc">通过 tooltip 属性为图标添加鼠标悬浮提示文字。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" size="32" tooltip="这是一个基础图标，没有特殊功能"/>
          <span class="label">无 tooltip</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" size="32" tooltip="带提示的图标：&lt;VIcon tooltip=&quot;通知消息&quot; /&gt;"/>
          <span class="label">tooltip="通知消息"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" size="32" color="#1890ff" cursor="pointer"
                 tooltip="可点击的提示图标：&lt;VIcon tooltip=&quot;点击查看详情&quot; cursor=&quot;pointer&quot; /&gt;"/>
          <span class="label">可点击 + tooltip</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" size="32" color="#52c41a"
                 tooltip="长文本提示：&lt;VIcon tooltip=&quot;很长的提示文字...&quot; /&gt;"/>
          <span class="label">长文本 tooltip</span>
        </div>
      </div>
    </div>

    <!-- 鼠标样式 -->
    <div class="demo-section">
      <h3>7. 鼠标样式</h3>
      <p class="section-desc">通过 cursor 属性设置鼠标悬浮时的光标样式。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" cursor="pointer" size="32"
                 tooltip="小手光标：&lt;VIcon cursor=&quot;pointer&quot; /&gt;"/>
          <span class="label">cursor="pointer"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" cursor="default" size="32"
                 tooltip="默认光标：&lt;VIcon cursor=&quot;default&quot; /&gt;"/>
          <span class="label">cursor="default"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" cursor="crosshair" size="32"
                 tooltip="十字光标：&lt;VIcon cursor=&quot;crosshair&quot; /&gt;"/>
          <span class="label">cursor="crosshair"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" cursor="not-allowed" size="32"
                 tooltip="禁止光标：&lt;VIcon cursor=&quot;not-allowed&quot; /&gt;"/>
          <span class="label">cursor="not-allowed"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" cursor="help" size="32"
                 tooltip="帮助光标：&lt;VIcon cursor=&quot;help&quot; /&gt;"/>
          <span class="label">cursor="help"</span>
        </div>
      </div>
    </div>

    <!-- 悬浮背景色 -->
    <div class="demo-section">
      <h3>8. 悬浮背景色</h3>
      <p class="section-desc">通过 hover-bg-color 和 hover-bg-radius 属性设置悬浮时的背景色和圆角。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#f0f0f0" size="32"
                 tooltip="灰色背景：&lt;VIcon hover-bg-color=&quot;#f0f0f0&quot; /&gt;"/>
          <span class="label">hover-bg-color="#f0f0f0"</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="rgba(24,144,255,0.1)" size="32"
                 tooltip="蓝色半透明背景：&lt;VIcon hover-bg-color=&quot;rgba(24,144,255,0.1)&quot; /&gt;"/>
          <span class="label">rgba 半透明背景</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#f0f0f0" :hover-bg-radius="4" size="32"
                 tooltip="圆角背景：&lt;VIcon hover-bg-color=&quot;#f0f0f0&quot; :hover-bg-radius=&quot;4&quot; /&gt;"/>
          <span class="label">圆角背景</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#ff4d4f" hover-bg-radius="50%" size="32"
                 tooltip="圆形红色背景：&lt;VIcon hover-bg-color=&quot;#ff4d4f&quot; hover-bg-radius=&quot;50%&quot; /&gt;"/>
          <span class="label">圆形背景</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" cursor="pointer" hover-bg-color="rgba(82,196,26,0.15)" :hover-bg-radius="8"
                 size="32"
                 tooltip="大圆角绿色背景：&lt;VIcon hover-bg-color=&quot;rgba(82,196,26,0.15)&quot; :hover-bg-radius=&quot;8&quot; /&gt;"/>
          <span class="label">大圆角背景</span>
        </div>
      </div>
    </div>

    <!-- 悬浮背景扩展 -->
    <div class="demo-section">
      <h3>9. 悬浮背景扩展</h3>
      <p class="section-desc">通过 hover-bg-add-size 属性设置悬浮时背景向外扩展的大小。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e6f7ff" :hover-bg-add-size="4" size="32"
                 tooltip="扩展4px：&lt;VIcon hover-bg-color=&quot;#e6f7ff&quot; :hover-bg-add-size=&quot;4&quot; /&gt;"/>
          <span class="label">扩展 4px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#f6ffed" :hover-bg-add-size="6" :hover-bg-radius="4" size="32"
                 tooltip="扩展6px + 圆角：&lt;VIcon :hover-bg-add-size=&quot;6&quot; :hover-bg-radius=&quot;4&quot; /&gt;"/>
          <span class="label">扩展 6px + 圆角</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#fff2e8" :hover-bg-add-size="8" hover-bg-radius="50%" size="32"
                 tooltip="扩展8px + 圆形：&lt;VIcon :hover-bg-add-size=&quot;8&quot; hover-bg-radius=&quot;50%&quot; /&gt;"/>
          <span class="label">扩展 8px + 圆形</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#f9f0ff" :hover-bg-add-size="10" :hover-bg-radius="12"
                 cursor="pointer" size="32"
                 tooltip="大扩展 + 大圆角：&lt;VIcon :hover-bg-add-size=&quot;10&quot; :hover-bg-radius=&quot;12&quot; /&gt;"/>
          <span class="label">扩展 10px + 大圆角</span>
        </div>
      </div>
    </div>

    <!-- 悬浮背景固定大小 -->
    <div class="demo-section">
      <h3>10. 悬浮背景固定大小（实际占位）</h3>
      <p class="section-desc">通过 hover-bg-size、hover-bg-width、hover-bg-height 属性设置容器的固定大小，控制实际布局占位空间。支持正方形和矩形容器。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e6f7ff" :hover-bg-size="40" size="32"
                 tooltip="40px固定背景：&lt;VIcon hover-bg-color=&quot;#e6f7ff&quot; :hover-bg-size=&quot;40&quot; /&gt;"/>
          <span class="label">固定 40px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#f6ffed" :hover-bg-size="48" :hover-bg-radius="8" size="32"
                 tooltip="48px固定背景 + 圆角：&lt;VIcon :hover-bg-size=&quot;48&quot; :hover-bg-radius=&quot;8&quot; /&gt;"/>
          <span class="label">固定 48px + 圆角</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#f9f0ff" :hover-bg-size="44" hover-bg-radius="50%" size="32"
                 tooltip="44px圆形固定背景：&lt;VIcon :hover-bg-size=&quot;44&quot; hover-bg-radius=&quot;50%&quot; /&gt;"/>
          <span class="label">固定 44px + 圆形</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#fff2e8" :hover-bg-size="52" :hover-bg-radius="12"
                 cursor="pointer" size="32"
                 tooltip="52px大固定背景：&lt;VIcon :hover-bg-size=&quot;52&quot; :hover-bg-radius=&quot;12&quot; /&gt;"/>
          <span class="label">固定 52px + 大圆角</span>
        </div>
      </div>

      <h4>布局占位特性演示</h4>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e8f5e8" :hover-bg-size="48" :hover-bg-radius="4" size="20"
                 tooltip="大容器小图标：&lt;VIcon :hover-bg-size=&quot;48&quot; size=&quot;20&quot; /&gt; - 容器48px占位，图标20px"/>
          <span class="label">容器48px + 图标20px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e8f5e8" :hover-bg-size="48" :hover-bg-radius="4" size="32"
                 tooltip="标准组合：&lt;VIcon :hover-bg-size=&quot;48&quot; size=&quot;32&quot; /&gt; - 容器48px占位，图标32px"/>
          <span class="label">容器48px + 图标32px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e8f5e8" :hover-bg-size="48" :hover-bg-radius="4" size="40"
                 tooltip="小容器大图标：&lt;VIcon :hover-bg-size=&quot;48&quot; size=&quot;40&quot; /&gt; - 容器48px占位，图标40px"/>
          <span class="label">容器48px + 图标40px</span>
        </div>
      </div>

      <h4>固定大小 vs 扩展大小对比</h4>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#fff2e8" :hover-bg-add-size="8" :hover-bg-radius="4" size="24"
                 tooltip="扩展模式：基于图标大小扩展8px"/>
          <span class="label">24px图标 + 扩展8px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#fff2e8" :hover-bg-size="40" :hover-bg-radius="4" size="24"
                 tooltip="固定模式：容器固定40px占位"/>
          <span class="label">24px图标 + 固定40px容器</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#fff2e8" :hover-bg-add-size="8" :hover-bg-radius="4" size="32"
                 tooltip="扩展模式：基于图标大小扩展8px"/>
          <span class="label">32px图标 + 扩展8px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#fff2e8" :hover-bg-size="40" :hover-bg-radius="4" size="32"
                 tooltip="固定模式：容器固定40px占位"/>
          <span class="label">32px图标 + 固定40px容器</span>
        </div>
      </div>

      <h4>独立宽高设置</h4>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e6f7ff" :hover-bg-width="60" :hover-bg-height="40" size="24"
                 tooltip="宽矩形容器：&lt;VIcon :hover-bg-width=&quot;60&quot; :hover-bg-height=&quot;40&quot; /&gt;"/>
          <span class="label">宽矩形 60×40px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#f6ffed" :hover-bg-width="40" :hover-bg-height="60" size="24"
                 tooltip="高矩形容器：&lt;VIcon :hover-bg-width=&quot;40&quot; :hover-bg-height=&quot;60&quot; /&gt;"/>
          <span class="label">高矩形 40×60px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#f9f0ff" :hover-bg-width="70" :hover-bg-height="45"
                 hover-bg-radius="50%" size="26"
                 tooltip="椭圆容器：&lt;VIcon :hover-bg-width=&quot;70&quot; :hover-bg-height=&quot;45&quot; hover-bg-radius=&quot;50%&quot; /&gt;"/>
          <span class="label">椭圆 70×45px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#fff2e8" :hover-bg-width="80" :hover-bg-height="32"
                 :hover-bg-radius="16" cursor="pointer" size="20"
                 tooltip="超宽按钮：&lt;VIcon :hover-bg-width=&quot;80&quot; :hover-bg-height=&quot;32&quot; :hover-bg-radius=&quot;16&quot; /&gt;"/>
          <span class="label">超宽按钮 80×32px</span>
        </div>
      </div>

      <h4>属性优先级演示</h4>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e8f5e8" :hover-bg-size="48" size="32"
                 tooltip="只有统一大小：&lt;VIcon :hover-bg-size=&quot;48&quot; /&gt;"/>
          <span class="label">size="48" → 48×48px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e8f5e8" :hover-bg-size="48" :hover-bg-width="60" size="32"
                 tooltip="宽度覆盖：&lt;VIcon :hover-bg-size=&quot;48&quot; :hover-bg-width=&quot;60&quot; /&gt;"/>
          <span class="label">size="48" + width="60" → 60×48px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e8f5e8" :hover-bg-size="48" :hover-bg-height="60" size="32"
                 tooltip="高度覆盖：&lt;VIcon :hover-bg-size=&quot;48&quot; :hover-bg-height=&quot;60&quot; /&gt;"/>
          <span class="label">size="48" + height="60" → 48×60px</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" hover-bg-color="#e8f5e8" :hover-bg-size="48" :hover-bg-width="60" :hover-bg-height="40" size="32"
                 tooltip="宽高都覆盖：&lt;VIcon :hover-bg-size=&quot;48&quot; :hover-bg-width=&quot;60&quot; :hover-bg-height=&quot;40&quot; /&gt;"/>
          <span class="label">完全覆盖 → 60×40px</span>
        </div>
      </div>
    </div>

    <!-- 悬浮缩放 -->
    <div class="demo-section">
      <h3>11. 悬浮缩放</h3>
      <p class="section-desc">通过 hover-scale 属性设置悬浮时的缩放效果，正数放大，负数缩小。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice" :hover-scale="0.2" size="32"
                 tooltip="放大1.2倍：&lt;VIcon :hover-scale=&quot;0.2&quot; /&gt;"/>
          <span class="label">hover-scale="0.2" (放大)</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" :hover-scale="0.5" size="32" color="#1890ff"
                 tooltip="放大1.5倍：&lt;VIcon :hover-scale=&quot;0.5&quot; /&gt;"/>
          <span class="label">hover-scale="0.5" (放大)</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" :hover-scale="-0.2" size="32" color="#ff4d4f"
                 tooltip="缩小到0.8倍：&lt;VIcon :hover-scale=&quot;-0.2&quot; /&gt;"/>
          <span class="label">hover-scale="-0.2" (缩小)</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice" :hover-scale="-0.4" size="32" color="#52c41a"
                 tooltip="缩小到0.6倍：&lt;VIcon :hover-scale=&quot;-0.4&quot; /&gt;"/>
          <span class="label">hover-scale="-0.4" (缩小)</span>
        </div>
      </div>
    </div>

    <!-- 完整组合效果 -->
    <div class="demo-section">
      <h3>12. 完整组合效果</h3>
      <p class="section-desc">组合使用多种悬浮效果，创造丰富的交互体验。</p>
      <div class="icon-row">
        <div class="icon-item">
          <VIcon name="layout-notice"
                 :hover-scale="0.3"
                 hover-bg-color="#e6f7ff"
                 :hover-bg-radius="4"
                 cursor="pointer"
                 size="32"
                 tooltip="缩放 + 背景：&lt;VIcon :hover-scale=&quot;0.3&quot; hover-bg-color=&quot;#e6f7ff&quot; :hover-bg-radius=&quot;4&quot; /&gt;"/>
          <span class="label">缩放 + 背景</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice"
                 :hover-scale="0.2"
                 hover-bg-color="#f6ffed"
                 hover-bg-radius="50%"
                 :hover-bg-add-size="6"
                 cursor="pointer"
                 size="32"
                 tooltip="缩放 + 圆形背景 + 扩展：完整组合效果"/>
          <span class="label">缩放 + 圆形 + 扩展</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice"
                 :hover-scale="-0.1"
                 hover-bg-color="#fff2e8"
                 :hover-bg-radius="8"
                 :hover-bg-add-size="8"
                 color="#fa8c16"
                 cursor="pointer"
                 size="32"
                 tooltip="轻微缩小 + 橙色背景 + 大扩展：精致的悬浮效果"/>
          <span class="label">精致悬浮效果</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice"
                 :hover-scale="0.4"
                 hover-bg-color="#f9f0ff"
                 :hover-bg-radius="12"
                 :hover-bg-add-size="4"
                 color="#722ed1"
                 spin
                 :speed="0.8"
                 cursor="pointer"
                 size="32"
                 tooltip="动画 + 缩放 + 背景：动态交互效果"/>
          <span class="label">动画 + 缩放 + 背景</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice"
                 :hover-scale="0.2"
                 hover-bg-color="#e6f7ff"
                 :hover-bg-size="48"
                 hover-bg-radius="50%"
                 cursor="pointer"
                 size="32"
                 tooltip="缩放 + 固定大小圆形背景：&lt;VIcon :hover-scale=&quot;0.2&quot; :hover-bg-size=&quot;48&quot; hover-bg-radius=&quot;50%&quot; /&gt;"/>
          <span class="label">缩放 + 固定圆形背景</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice"
                 :hover-scale="-0.1"
                 hover-bg-color="#f6ffed"
                 :hover-bg-size="44"
                 :hover-bg-radius="8"
                 color="#52c41a"
                 cursor="pointer"
                 size="32"
                 tooltip="轻微缩小 + 固定大小背景：&lt;VIcon :hover-scale=&quot;-0.1&quot; :hover-bg-size=&quot;44&quot; /&gt;"/>
          <span class="label">缩小 + 固定背景</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice"
                 :hover-scale="0.15"
                 hover-bg-color="#fff7e6"
                 :hover-bg-width="70"
                 :hover-bg-height="45"
                 hover-bg-radius="50%"
                 cursor="pointer"
                 size="26"
                 tooltip="椭圆背景 + 缩放：&lt;VIcon :hover-scale=&quot;0.15&quot; :hover-bg-width=&quot;70&quot; :hover-bg-height=&quot;45&quot; hover-bg-radius=&quot;50%&quot; /&gt;"/>
          <span class="label">椭圆背景 + 缩放</span>
        </div>
        <div class="icon-item">
          <VIcon name="layout-notice"
                 :hover-scale="0.2"
                 hover-bg-color="#f0f5ff"
                 :hover-bg-width="80"
                 :hover-bg-height="32"
                 :hover-bg-radius="16"
                 :hover-bg-add-size="3"
                 cursor="pointer"
                 size="20"
                 tooltip="超宽按钮 + 缩放 + 扩展：&lt;VIcon :hover-bg-width=&quot;80&quot; :hover-bg-height=&quot;32&quot; :hover-scale=&quot;0.2&quot; /&gt;"/>
          <span class="label">超宽按钮 + 缩放</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import VIcon from "@component/icon/VIcon.vue";
</script>

<style scoped>
.demo-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.demo-container h1 {
  text-align: center;
  color: #1890ff;
  margin-bottom: 10px;
  font-size: 2.5em;
  font-weight: 600;
}

.intro {
  text-align: center;
  color: #666;
  font-size: 1.1em;
  margin-bottom: 40px;
  line-height: 1.6;
}

.demo-section {
  margin-bottom: 40px;
  background: #fafafa;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #f0f0f0;
}

.demo-section h3 {
  margin-bottom: 8px;
  color: #1890ff;
  font-size: 1.4em;
  font-weight: 600;
  border-bottom: 2px solid #e6f7ff;
  padding-bottom: 8px;
}

.demo-section h4 {
  margin: 20px 0 12px 0;
  color: #595959;
  font-size: 1.1em;
  font-weight: 500;
}

.section-desc {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: 0.95em;
}

.icon-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 16px;
}

.icon-row.toolbar {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  padding: 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.icon-item .label {
  font-size: 0.85em;
  color: #666;
  text-align: center;
  line-height: 1.3;
  max-width: 140px;
  word-break: break-word;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
}

.custom-icon {
  border: 2px solid #1890ff;
  border-radius: 50%;
  padding: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demo-container {
    padding: 16px;
  }

  .demo-container h1 {
    font-size: 2em;
  }

  .icon-row {
    gap: 16px;
    padding: 16px;
  }

  .icon-item {
    min-width: 100px;
    padding: 8px;
  }

  .icon-item .label {
    font-size: 0.8em;
    max-width: 100px;
  }
}

/* 代码高亮样式 */
.icon-item .label code {
  background: #f6f8fa;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 0.9em;
}
</style>
